import React, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
import { LibAppView } from "@/lib";
import { FormattedMessage } from "react-intl";
import { Button, Tag } from "antd";
import { ResourceList } from "../../Component/ResourceList";
import { PlusOutlined } from "@ant-design/icons";
import { useDelete } from "../../hooks/useDelete";
import { AdminRight } from "@/pages/Admin/data/AdminPageAuth";
import { useArticleReview } from "../../Layout/Review/useArticleReview";
import ResourceStatus from "../../Component/ResourceStatus";

const ArticleList = LibAppView.withService({
    reqEndPoints: [{
        endPoint: "article.config",
        name: "config"
    }],
})((props) => {
    const microApp = LibAppView.useMicroApp();
    const listRef = useRef<any>();
    const reviewApi = useArticleReview();
    const categoryList = useMemo(() => {
        const categoryData = (props.responseData as any).config?.data?.category || [];
        return categoryData;
    }, [props.responseData]);
    const artTypeList = useMemo(() => {
        return (props.responseData as any).config?.data?.actType || [];
    }, [props.responseData]);
    const deleteAction = useDelete({
        endPoint: "article.submit",
        cancelEndPoint: "article.submit",
        data: {},
        listRef
    });
    const columns = useMemo(() => ([
        {
            title: <FormattedMessage id="admin.pages.article.title" />,
            dataIndex: "title",
            width: 260,
            fixed: true,
            render: (title: string, data: any) => {
                return <Button type="link" style={{whiteSpace: "normal",textAlign: "left"}} onClick={() => reviewApi.show(data.id)}>{title}</Button>
            }
        },{
            title: "审核拒绝原因",
            dataIndex: "approveMsg",
            width: 200,
        },{
            title: "是否头条",
            dataIndex: "isHot",
            width: 60,
            render: (isHot: number) => {
                return (<>
                    { isHot === 1 && <Tag color="error">是</Tag> }
                    { isHot === 0 && <Tag color="green">否</Tag> }
                </>);
            }
        },
        {
            title: <FormattedMessage id="admin.pages.article.category"/>,
            dataIndex: "categoryTitle",
            width: 120,
            fixed: false
        }, {
            title: <FormattedMessage id="admin.pages.article.typeTile"/>,
            dataIndex: "artTitle",
            width: 120,
            fixed: false
        },{
            title: <FormattedMessage id="admin.pages.menus.edit.status"/>,
            dataIndex: "status",
            width: 100,
            render: (status: number) => {
                return (<ResourceStatus status={status} />);
            }
        },  {
            title: <FormattedMessage id="admin.pages.createUser"/>,
            dataIndex: "createUserName",
            width: 100
        },{
            title: <FormattedMessage id="admin.pages.createTime"/>,
            dataIndex: "createDateTime",
            width: 140
        }, {
            title: <FormattedMessage id="admin.pages.updateUser"/>,
            dataIndex: "updateUserName",
            width: 140
        },{
            title: <FormattedMessage id="admin.pages.updateTime"/>,
            dataIndex: "updateDateTime",
            width: 140
        },{
            title: <FormattedMessage id="admin.pages.language.operate"/>,
            dataIndex: "id",
            width: 140,
            render: (id: number, data: any) => {
                const nextProps = data.status != 0 ? { disabled: true} : {};//!data.owner ? { disabled: true } : {};
                const cancelProps = data.status == 0 ? { disabled: true } : {};
                return (<>
                    <AdminRight authRight="editable" mode="disabled" nextProps={nextProps}>
                        <Button size="small" onClick={()=>{
                            microApp.startJourney("articleEditJourny", {
                                state: data
                            });
                        }}>
                            <FormattedMessage id="admin.pages.operate.edit"/>
                        </Button>
                    </AdminRight>
                    <AdminRight authRight="editable" mode="disabled" nextProps={cancelProps}>
                        <Button size="small" onClick={()=>{
                            deleteAction.cancel({
                                ...data,
                                status: 0
                            })
                        }}>
                            <FormattedMessage id="admin.pages.operate.cancel"/>
                        </Button>
                    </AdminRight>
                    <AdminRight authRight="deleteable" mode="disabled" nextProps={nextProps}>
                    <Button size="small" onClick={() => {
                        deleteAction.delete({
                            ...data,
                            status: -1
                        })
                    }}><FormattedMessage id="admin.pages.operate.delete"/></Button>
                    </AdminRight>
                </>);
            }
        }
    ]), [deleteAction]);
    const SearchFields: Admin.IAdvancedField[] = useMemo(() =>([
        {
            type: "Select",
            label: "admin.pages.article.category",
            name: "categoryName",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(categoryList || [])]
        },
        {
            type: "Select",
            label: "admin.pages.article.typeTile",
            name: "artType",
            placeholder: "admin.layout.input.placeholder",
            props: { autoComplete: "off" },
            data: [{
                label: <FormattedMessage id="admin.pages.article.allCategory" />,
                value: null
            }, ...(artTypeList || [])]
        }, {
            type: "Input",
            label: "admin.pages.article.title",
            name: "title",
            placeholder: "admin.layout.input.placeholder",
        }
    ]), [categoryList, artTypeList]);
    const listEndPoint = useMemo(() => ({
        endPoint: "article.list",
    }), []);

    const onAddClick = useCallback(() => {
        microApp.startJourney("articleEditJourny");
    }, []);
    const Operator = useMemo(() => {
        return () => {
            return (
            <AdminRight authRight="editable" mode="disabled">
                <Button type="primary" onClick={onAddClick}>
                    <PlusOutlined />
                    <span><FormattedMessage id="admin.pages.operate.add" /></span>
                </Button>
            </AdminRight>);
        };
    }, [onAddClick]);
    useLayoutEffect(() => {
        microApp.registeJourney({
            name: "articleEditJourny",
            title: "test journey",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.resourceArticleEdit"
            }]
        });
    }, []);

    return (<>
        <ResourceList
            refApi={listRef}
            tableColumns={columns}
            searchFields={SearchFields} 
            listEndPoint={listEndPoint}
            Operators={Operator}
        />
        {reviewApi.Provider}
    </>);
});

export default ArticleList;
